<template>
    <diV class="botCheck flex flexJCB flexAlignCenter vux-1px-t" :style="{ bottom: bottom + 'rem'}">
        <check-icon class="ml10 gary" :value="vals" @click.native="clickCB(vals)">{{!this.checkall?'全选':'取消全选'}}</check-icon>
        <div class="flex flexAlignCenter h100">
            <slot></slot>
            <div class="right flex pl30 pr30 flexAlignCenter ml10 mr10" @click="clickRight()">{{text}}</div>
        </div>
    </diV>
</template>
<script>
import { CheckIcon } from 'vux'
export default {
    name:'botCheck',
    props:{
        bottom:{
            default: 0,//设置底部高度占比
        },
        checkall:{
            default:false
        },
        text:{
            default:"结算"
        }
    },
    computed:{
        vals(){
            return this.checkall;
        }
    },
    methods:{
        clickRight(){
            this.$emit('sureCB')
        },
        clickCB(state){
            this.$emit('update:checkall',!state);
            this.$emit('clickCB',!state);
        }
    },
    components:{
        CheckIcon,
    }
}
</script>
<style scoped lang="less">
.botCheck{
    position:fixed;
    left:0rem;
    right:0rem;
    height:4.5rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
    background:#f0eff5;
    .right{
        background:#ec2424;
        height:70%;
        color:white;
        border-radius: 4rem;
    }
}
</style>
